@charset "utf-8";
/* 
一.selector 命名规范：
命名除 .fn- / .ui- / .sl- 外，可自定义命名。请慎用 selected current disabled first last success error
一般情况下，如果命名比较通用，比如 current，请限定在相应的上下文环境中。比如其父节点ID为#parent 等比较通用的命名，建议写成 #parent .current{}，而非 .current{}，即使是为了重用，也应该注意。只有在非常明确不会影响到其他组件工作，并且其他人不会写这种命名的情况下，才让它变成全局通用的。
作为JS接口的class或者ID，必须是以 J- 前缀开头的。除 JS 接口命名外，其他命名一律使用小写字母 

二.注释，注释文字前后端保持各有一个空格

三.CSS文件
文件编码必须使用utf-8（无BOM）
文件一律通过 link 链入 (NOT @import)
当只是单个页面使用时，才写在 <head> 的 <style> 中

四.通用 Hack

.all-IE{property:value\9;}
:root .IE-9{property:value\0/;}
.gte-IE-8{property:value\0;}
.lte-IE-7{*property:value;}
.IE-7{+property:value;}
.IE-6{_property:value;}
.not-IE{property//:value;}
@-moz-document url-prefix() { .firefox{property:value;} }
@media all and (-webkit-min-device-pixel-ratio:0) { .webkit{property:value;} }
@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) { .opera{property:value;} }
@media screen and (max-device-width: 480px) { .iphone-or-mobile-s-webkit{property:value;} }

五.书写规范
CSS3 书写规范：浏览器私有写法在前，标准写法在后
不强制书写顺序。但我们应该养成良好的习惯，让看代码的人更易理解。易读对于团队协作来说是非常重要的：
1. 框架为先，细节次之
2. 有因才有果

六.组件命名
1.组件整体状态 = 组件名 + 状态
常用的状态有：hover, current, selected, disabled, focus, blur, checked, success, error 等。通常你的命名应该看起来像 .ui-name-hover, .ui-name-error 这样。

2.组件模块 = 组件名 + 模块名
常用模块名有：cnt(content), hd(header), body(bd), footer{ft}, text(txt), img(images/pic),item, cell 等，只要词义表达了组件要实现的功能或者要表现出来的的外观就可以了。
*/

/********** 全局 **********/

/* 全局文字 */
.fs12 { font-size:12px; }
.fs14 { font-size:14px; }
.fs16 { font-size:16px; }
.fs18 { font-size:18px; }
.fs20 { font-size:20px; }
.fs22 { font-size:22px; }
.fs26 { font-size:26px; }
.fs28 { font-size:28px; }
.font-yahei { font-family: \5FAE\8F6F\96C5\9ED1, sans-serif; font-weight:normal; }
.font-simsun { font-family: \5b8b\4f53, sans-serif; font-weight:normal; }
.font-arial { font-family: Arial, Helvetica, sans-serif; font-weight:normal; }
.font-verdana { font-family: Verdana, Geneva, sans-serif; font-weight:normal; }
.fw-bold { font-weight:bold; }
/* 全局颜色 */
a { color:#666; }
a:hover { color:#0776B8; }
.warp { background:#F9F9ED; }
.rc { color: #EE2266; }
.bc { color: #55AADD; }
.yc { color: #EE6633; }
.gc { color: #999999; }
.gc6 { color: #666666; }
.bg-red { background: #FEF7FA; }
.bg-blue { background: #F8FCFF; }
.bg-gray { background: #F3F3F3; }
/* 全局布局 */
.w960 { width:960px; margin:0 auto; }
.main { width:960px; margin:0 auto; }
.m0 { margin:0!important; }
.ml5 { margin-left:5px!important; }
.m10 { margin:10px!important; }
.m20 { margin:20px!important; }
.mr5 { margin-right:5px!important; }
.mlr5 { margin-left:5px!important; margin-right:5px!important; }
.ml8 { margin-left:8px!important; }
.mr8 { margin-right:8px!important; }
.mlr8 { margin-left:8px!important; margin-right:8px!important; }
.ml10 { margin-left:10px!important; }
.mr10 { margin-right:10px!important; }
.mlr10 { margin-left:10px!important; margin-right:10px!important; }
.mb10 { margin-bottom:10px!important; }
.pb0 { padding-bottom:0!important; }
.noline, .noline:hover { text-decoration:none; }
.pointer { cursor:pointer; }
/********** 模块 **********/

/* 布局 sl-layout */
/*
 * @name: 标题
 * @overview: 有其他内容包含在内的标题
 * @require: null;
 */
.ui-title { }
.ui-title-cnt { }
.ui-title-subcnt { }
/*
 * @name: 列表
 * @overview: 一般列表样式
 * @require: null;
 */
.ui-list { }
.ui-list-item { }
.ui-list-item-hover { }
/*
 * @name: 三角形箭头
 * @overview: 通用箭头
 * @require: null;
*/
.arrow-top { border-bottom: 8px solid #FFFFFF; border-left: 8px dashed transparent; border-right: 8px dashed transparent; height: 0; width: 0; }
.arrow-bottom { border-top: 8px solid #FFFFFF; border-left: 8px dashed transparent; border-right: 8px dashed transparent; height: 0; width: 0; }
/* 
 * @name: btn
 * @overview: 通用按钮
 * @require: null
 */
.btn { cursor:pointer; font-family: \5b8b\4f53, sans-serif; border-radius:.3em; display: inline-block; *display: inline;
zoom: 1; vertical-align:middle; text-align: center; letter-spacing:1px; white-space:nowrap; text-decoration: none; line-height:1; margin: 0 2px; padding: 8px !important; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.btn:hover { text-decoration: none; color:#FFF; box-shadow: 0 0 2px rgba(0, 0, 0, .2); }
.btn:focus { outline:1px dotted #CCC; }
.btn-bigrounded { border-radius: 2em; }
.btn-larger { font-size:16px; font-weight:bold; padding:12px; letter-spacing:normal; }
.btn-medium { font-size: 12px; padding:10px !important; }
.btn-small { padding:5px !important; }
/* white */
.btn-white { color: #555; border: solid 1px #CCC; background: #E5E5E5; background: -webkit-gradient(linear, left top, left bottom, from(#FDFDFD), to(#E5E5E5)); background: -moz-linear-gradient(top, #FDFDFD, #E5E5E5); background: -o-linear-gradient(top, #FDFDFD, #E5E5E5); background: linear-gradient(top, #FDFDFD, #E5E5E5); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FDFDFD', endColorstr='#E5E5E5');
}
.btn-white:hover { color:#505050; border-color: #BBB; background: #EDEDED; background: -webkit-gradient(linear, left top, left bottom, from(#E5E5E5), to(#FDFDFD)); background: -moz-linear-gradient(top, #E5E5E5, #FDFDFD); background: -o-linear-gradient(top, #E5E5E5, #FDFDFD); background: linear-gradient(top, #E5E5E5, #FDFDFD); filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#E5E5E5', endColorstr='#FDFDFD');
}
.btn-white:active { box-shadow: 0 0 6px #CCC inset; }
/* blue */
.btn-blue { color: #FFF; border: 1px solid #2580bc; box-shadow: 0 1px 2px rgba(0, 53, 83, .3); text-shadow:0 0 0 transparent, 0 1px 0 rgba(0, 0, 0, .3); background: #3f97cf; background: -webkit-gradient(linear, left top, left bottom, from(#6fbaea), to(#1f83ba)); background: -moz-linear-gradient(top, #6fbaea, #1f83ba); background: -o-linear-gradient(top, #6fbaea, #1f83ba); background: linear-gradient(top, #6fbaea, #1f83ba); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6fbaea', endColorstr='#1f83ba');
}
.btn-blue:hover { box-shadow: 0 -1px 2px rgba(0, 53, 83, .3); text-shadow:0 0 0 transparent, 0 -1px 0 rgba(0, 0, 0, .3); background: #80c7f3; background: -webkit-gradient(linear, left top, left bottom, from(#2f8fc3), to(#6fbaea)); background: -moz-linear-gradient(top, #2f8fc3, #6fbaea); background: -o-linear-gradient(top, #2f8fc3, #6fbaea); background: linear-gradient(top, #2f8fc3, #6fbaea); filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#2f8fc3', endColorstr='#6fbaea');
}
.btn-blue:active { box-shadow: 0 0 6px #08598a inset; }
/* red */
.btn-red { color: #FFF; border: solid 1px #ce3d37; text-shadow:0 0 0 transparent, 0 1px 0 rgba(0, 0, 0, .3); background: #BD362F; background: -webkit-gradient(linear, left top, left bottom, from(#EE5F5B), to(#BD362F)); background: -moz-linear-gradient(top, #EE5F5B, #BD362F); background: -o-linear-gradient(top, #EE5F5B, #BD362F); background: linear-gradient(top, #EE5F5B, #BD362F); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EE5F5B', endColorstr='#BD362F');
}
.btn-red:hover { text-shadow:0 0 0 transparent, 0 -1px 0 rgba(0, 0, 0, .3); background: #cd3f37; background: -webkit-gradient(linear, left top, left bottom, from(#c83d35), to(#EE5F5B)); background: -moz-linear-gradient(top, #c83d35, #EE5F5B); background: -o-linear-gradient(top, #2f8fc3, #EE5F5B); background: linear-gradient(top, #c83d35, #EE5F5B); filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#c83d35', endColorstr='#EE5F5B');
}
.btn-red:active { box-shadow: 0 0 6px #be2e28 inset; }
/* green */
.btn-green { color: #FFF; border: solid 1px #60BF00; text-shadow:0 0 0 transparent, 0 1px 0 rgba(0, 0, 0, .3); background: #87C807; background: -webkit-gradient(linear, left top, left bottom, from(#92D20C), to(#77B900)); background: -moz-linear-gradient(top, #92D20C, #77B900); background: -o-linear-gradient(top, #92D20C, #77B900); background: linear-gradient(top, #92D20C, #77B900); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#92D20C', endColorstr='#77B900');
}
.btn-green:hover { text-shadow:0 0 0 transparent, 0 -1px 0 rgba(0, 0, 0, .3); background: #92D20C; background: -webkit-gradient(linear, left top, left bottom, from(#77B900), to(#92D20C)); background: -moz-linear-gradient(top, #77B900, #92D20C); background: -o-linear-gradient(top, #77B900, #92D20C); background: linear-gradient(top, #77B900, #92D20C); filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#77B900', endColorstr='#92D20C');
}
.btn-green:active { box-shadow: 0 0 6px #77B900 inset; }
/* 禁用状态-放置最后 */
.btn-disabled, .btn-disabled:hover { box-shadow: 0 1px 5px rgba(30, 30, 30, 0.3) inset, 0 1px 2px rgba(0, 0, 0, 0.1); background:#F3F3F3; color:#888; }
.btn-add { box-shadow: 2px 0pt 2px rgba(0, 0, 0, 0.1); *border-right:1px solid #36C;
padding: 8px 5px 8px 0pt; margin-right: 9px; }
/*
 * @name: 等高栏
 * @overview: 通用等高栏组件
 * @require: null;
*/
/* 如果页面不是960px的话,需更改宽度 */
.sl-equalheight { width: 960px;  /* 需重设 */ overflow: hidden; }
/* 等高 */
.sl-equalheight-item { margin-bottom: -9999em; padding-bottom: 9999em; }
/*
	@ name: 禁用中文输入法
	@ require:
	在需要禁用的地方添加: .sl-ime-disabled
*/

.sl-ime-disabled { ime-mode:disabled!important; }
.sl-ime-inactive { ime-mode:inactive!important; }
